<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        body{
            background-color: orange;
        }
    </style> -->
</head>
<body>
    <div id="app">
        <p>类名和样式的绑定</p>
        <p>{{ str }}</p>
        <p class="active container box content abc"></p>
        <p :class="{active:true,container:false,box:true,content:false,abc:true}"></p>
        <p :class="classInfo"></p>

        <p style="background-color: orange; width: 100px;height: 100px; color:white">asdf</p>
        <p :style="{backgroundColor: 'orange',width: '100px',height: '100px',color:'white'}">haha</p>
        <p :style="[styleInfo,styleInfo2]">haha</p>

    </div>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script>
        const {createApp} = Vue;


        createApp({
            data(){
                return {
                    str:'hello world',
                    classInfo:{
                        active:true,
                        container:false,
                        box:true,
                        content:false,
                        abc:false
                    },
                    styleInfo:{
                        fontSize:'30px',
                        fontWeight:700
                    },
                    styleInfo2:{
                        width:'300px',
                        height:'700px',
                        color:'white',
                        backgroundColor:'pink'
                    }
                }
            }
        }).mount('#app')
    </script>
</body>
</html>